<template>
  <view class="" style="padding: 30rpx; padding-bottom: 240rpx;box-sizing: border-box;">
    <view class="item-con">	
      <view class="item-title pad">选择车牌号码</view>
      <view
        class="item-input pad flex-row items-center justify-between"
        @click="showCarPicker = true"
      >
        <view class="card-w">
          <text style="margin-right: 10rpx">{{ city }}</text>
          <u-icon name="arrow-down" size="21" color="#999"></u-icon>
        </view>
        <view class="fill"
          ><input
            class="fill input"
            disabled
            v-model="license"
            style="padding-left: 20rpx"
            type="text"	
            value=""
            placeholder="请输入"
        /></view>
      </view>
    </view>

    <view >
      <view class="btn" hover-class="hover-opacity" @click="submit">保存</view>
      <view class="bottom-text-line" @click="delCart(0)">删除爱车</view>
    </view>
    <mix-modal
      ref="mixModal"
      text="确定删除吗?"
      @onConfirm="delCart(1)"
    ></mix-modal>
    <u-picker
      mode="selector"
      :range="cartUserTypeList"
      v-model="show"
      @confirm="userTypeConfirm"
    ></u-picker>

    <u-popup mode="bottom" v-model="showCarPicker">
      <view
        class="flex-col justify-center fill"
        style="background: #ffffff; padding: 30rpx 0"
      >
        <u-message-input
          :dot-fill="false"
          :breathe="false"
          font-size="32"
          disabled-keyboard
          width="70"
          :value="value"
          :maxlength="maxlength"
        ></u-message-input>
        <u-car-keyboard
          ref="uCarKeyboard"
          @change="valChange"
          @backspace="backspace"
        ></u-car-keyboard>
        <view
          class="btn"
          style="margin: 30rpx auto"
          hover-class="hover-opacity"
          @click="carPickerConfirm"
          >确定</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { checkStr } from "@/common/js/util.js";
export default {
  data() {
    return {
      maxlength: 8,
      showCarPicker: false,
      show: false,
      content: "",
      value: "",
      carNumber: [],
      city: "京",
      license: "",
      cartInfo: {
        uid: uni.getStorageSync("uid"),
        id: "",
        icon: "", //品牌图标
        name: "", //品牌名
        type: "", //用车类型直接传名字
        name1: "", //车系名
        name2: "", //车型名
        continuation: "", //续航
        batteryCapacity: "", //电池容量
        isDefult: "", //是否默认
        license: "", //车牌号
      },
    };
  },
  watch: {
    carNumber: {
      handler(newVal) {
        this.value = newVal.join("");
        this.license = this.value.replace(this.city, "");
        let flag = newVal == "" ? false : true;
        this.$refs.uCarKeyboard.initInputModel(flag);
      },
      deep: true,
    },
  },
  onLoad(options) {
    options.type ? this.initData() : "";
  },
  methods: {
    initData() {
      this.cartInfo = Object.assign(
        this.cartInfo,
        getApp().globalData.cartInfo
      );
      this.city = this.cartInfo.license.substr(0, 1);
      this.license = this.cartInfo.license.replace(this.city, "");
      this.value = this.cartInfo.license;
    },
    carPickerConfirm() {
      if (this.value == "") {
        this.$util.msg("请输入车牌号");
        return;
      } else {
        this.cartInfo.license = this.value;
        this.showCarPicker = false;
      }
    },
    valChange(val) {
      if (this.carNumber.length == this.maxlength) return;
      if (!checkStr(val, "chinese") && this.value == "") return;
      if (!checkStr(val, "english") && this.carNumber.length == 1) return;
      let index = checkStr(val, "chinese") ? 0 : this.carNumber.length;
      this.$set(this.carNumber, index, val);
      index == 0 ? (this.city = val) : "";
    },
    backspace() {
      if (this.value.length)
        this.carNumber = this.carNumber.splice(0, this.value.length - 1);
    },
    setCartItem(item) {
      console.log(item);
      this.cartInfo = Object.assign(this.cartInfo, item);
      console.log(this.cartInfo);
    },
    change(e) {
      e.detail.value
        ? (this.cartInfo.isDefult = 1)
        : (this.cartInfo.isDefult = 0);
    },
    userTypeConfirm(array) {
      let index = array[0];
      this.cartInfo.type = this.cartUserTypeList[index];
    },
    async submit() {
      const {
        name,
        name1,
        name2,
        type,
        continuation,
        batteryCapacity,
        license,
      } = this.cartInfo;
    //   if (name == "") {
    //     this.$util.msg("请选择品牌名称!");
    //     return;
    //   }
    //   if (name1 == "") {
    //     this.$util.msg("请选择车系名称!");
    //     return;
    //   }
    //   if (name2 == "") {
    //     this.$util.msg("请选择车型名称!");
    //     return;
    //   }
    //   if (type == "") {
    //     this.$util.msg("请选择用车类型!");
    //     return;
    //   }
    //   if (continuation == "") {
    //     this.$util.msg("请输入续航!");
    //     return;
    //   }
    //   if (batteryCapacity == "") {
    //     this.$util.msg("请输入池容量!");
    //     return;
    //   }
      if (license == "") {
        this.$util.msg("请输入车牌号!");
        return;
      }
	  if(this.cartInfo.isDefult == ""){
		this.cartInfo.isDefult = '1'
		return;
	  }
      const res = await this.$request("user/edit-car", this.cartInfo, {
        showLoading: true,
      });
      if (res.result == 0) {
        this.$util.msg("提交成功!");
        uni.$emit("change", this.cartInfo);
        this.back();
      } else {
        this.$util.msg(res.resultNote);
      }
    },
    async delCart(type) {
      if (type == 0) {
        this.$refs.mixModal.open();
      } else {
        const res = await this.$request(
          "user/delete-car",
          { id: this.cartInfo.id },
          { showLoading: true }
        );
        if (res.result == 0) {
          this.$util.msg("提交成功!");
          uni.$emit("del", this.id);
          this.back();
        } else {
          this.$util.msg(res.resultNote);
        }
      }
    },
    async getContent() {
      const res = await this.$request("content/text", { type: 0 });
      if (res.result == 0) {
        this.content = res.data.content;
      } else {
        this.$util.msg(res.resultNote);
      }
    },
  },
};
</script>

<style scoped lang="scss">
body, page, .uni-page {
  background: #f7f8fa !important;
}
.bottom-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  height: 220rpx;
  box-shadow: 0 -4rpx 24rpx 0 rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20rpx;
  left: 0;
  right: 0;
  z-index: 10;
}
.btn {
  width: 90vw;
  max-width: 704rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #ff710b;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  margin: 0 auto 10rpx auto;
  box-shadow: 0 4rpx 16rpx 0 rgba(255,113,11,0.10);
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-text-line {
  font-size: 26rpx;
  font-weight: 500;
  text-decoration: underline;
  color: #ff710b;
  padding: 18rpx 0 0 0;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-w {
  border-right: 1rpx solid #e7e7e7;
  padding-right: 20rpx;
}
.input {
  text-align: left;
  font-size: 30rpx;
  color: #222;
  background: transparent;
}
.pad {
  padding: 0 20rpx;
}
.item-con {
  padding-bottom: 20rpx;
  margin-top: 30rpx;
}
.item-title {
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
  color: #333;
  font-size: 30rpx;
  margin-bottom: 18rpx;
}
.item-input {
  height: 95rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 20rpx;
}
.item-textarea {
  background: #ffffff;
  // padding: 20rpx;
}
.textarea {
  height: 246rpx;
  width: 100%;
  font-size: 26rpx;
  font-weight: 500;
  color: #999999;
}
</style>
